<template>
  <div class="main-intention" :style="[$parent.getTitleDirStyle, getModBottom]">
    <RTitle :title-color="getModColor" icon="intention" :isShow="getSettingStatus('title')"
            :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    <div class="info-content" :class="settings.skin" :style="getShowStyle">
      <div class="content" v-for="(item, index) in dataLs" :key="index" v-if="item.value">
        <img @click="delItem(index)" alt="删除" class="del" src="@/assets/resume/del.svg"/>
        <img alt="图标" width="15px" style="margin-right: 2px" v-show="settings.skin === 'info-icon'" :src="getIcon(item.type, item.icon)"/>
        <span>{{item.value}}</span>
      </div>
    </div>

    <!--操作-->
    <ROperator :operators="['edit', 'drag', 'skin', 'setting']" @edit="onShowEdit" @skin="onChangeSkin"
               @setting="onChangeSetting" @drag="onDrag($event)"/>
    <!--编辑-->
    <RPop v-model="showEdit" title="编写求职状态" width="500px" height="150px">
      <div class="item-between">
        <label>
          求职类型<input class="input-line" placeholder="请输入求职类型" v-model="tempData[0].value"/>
        </label>
        <label>
          意向岗位<input class="input-line" placeholder="请输入意向岗位" v-model="tempData[1].value"/>
        </label>
      </div>
      <div class="item-between">
        <label>
          意向城市<input class="input-line" placeholder="请输入意向城市" v-model="tempData[2].value"/>
        </label>
        <label>
          求职状态<input class="input-line" placeholder="请输入求职状态" v-model="tempData[3].value"/>
        </label>
      </div>
      <div class="item-between">
        <label>
          薪资要求<input class="input-line" placeholder="请输入薪资要求" v-model="tempData[4].value"/>
        </label>
      </div>
      <div class="item-center">
        <div style="width: 150px;display: flex;flex-direction: row;justify-content: space-between">
          <RButton @click="save">确定</RButton>
          <RButton @click="onShowEdit" type="cancel">取消</RButton>
        </div>
      </div>
    </RPop>
    <!--换肤-->
    <div class="intention-skin" v-show="changeSkin" @mouseleave="onChangeSkin">
      <span>切换样式</span>
      <span class="skin-choice" :style="{color: skin === settings.skin?'lightskyblue':'inherit'}"
            v-for="(skin, index) in skinLs" :key="index" @click="chooseSkin(skin)">●</span>
    </div>
    <!--设置-->
    <div v-show="changeSetting" @mouseleave="onChangeSetting">
      <RSetting v-model="settings.switchLs"></RSetting>
    </div>
  </div>
</template>

<script>
import RTitle from '../base/RTitle'
import ROperator from '../base/ROperator'
import RPop from '../base/RPop'
import RButton from '../base/RButton'
import mixin from '../../store/mixin'
import RSetting from '../base/RSetting'

export default {
  name: 'Intention',
  components: {RSetting, RTitle, ROperator, RPop, RButton},
  mixins: [mixin],
  data () {
    return {
      showEdit: false,
      changeSkin: false,
      changeSetting: false,
      skinLs: Object.freeze([
        'info-after',
        'info-before',
        'info-none',
        'info-icon'
      ]),
      tempData: []
    }
  },
  props: ['compId'],
  created () {
    this.tempData = this.dataLs
  },
  methods: {
    onShowEdit () {
      this.tempData = this._.cloneDeep(this.dataLs)
      this.showEdit = !this.showEdit
    },
    onChangeSkin () {
      this.changeSkin = !this.changeSkin
    },
    onChangeSetting () {
      this.changeSetting = !this.changeSetting
    },
    chooseSkin (skin) {
      this.settings.skin = skin
    },
    getIcon (type, icon) {
      return icon || require(`@/assets/resume/intention/${type}.svg`)
    },
    delItem (index) {
      this.dataLs[index].value = ''
    },
    save () {
      this.dataLs = this.tempData
      this.showEdit = !this.showEdit
    }
  },
  computed: {
    getShowStyle () {
      let showNum = this.dataLs.reduce((acc, item) => acc + (item.value ? 1 : 0), 0)
      return {justifyContent: showNum > 2 ? 'space-between' : 'flex-start'}
    }
  }
}
</script>

<style scoped lang="less">

  .main-intention {
    .info-content {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;

      .content {
        position: relative;
        padding: 2px;
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;

        &:hover {
          background: rgba(246, 246, 246, 0.8);

          .del {
            display: block;
          }
        }

        .del {
          position: absolute;
          right: -6px;
          top: -6px;
          width: 12px;
          height: 12px;
          display: none;
        }
      }
    }

    .info-after .content:not(:last-child):after {
      content: " |";
      display: inline-block;
      margin-left: 2px;
    }

    .info-before .content:before {
      content: "● ";
      display: inline-block;
      margin-right: 2px;
    }

    .intention-skin {
      position: absolute;
      top: -60px;
      right: 10px;
      width: 165px;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 3;
      background: white;
      box-shadow: 10px 10px 10px whitesmoke;
      border: 1px whitesmoke solid;

      .skin-choice {
        font-size: 18px;
        cursor: pointer
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        right: 16px;
        top: 40px;
        width: 0;
        height: 0;
        border-top: 10px white solid;
        border-left: 10px transparent solid;
        border-right: 10px transparent solid;
      }
    }
  }

</style>
